<template>
  <div>
    <div class="header3">
      <span class="iconfont iconjiantou2" @click="goBack"></span>
      <div class="searchWrapper">
        <span class="iconfont iconsearch"></span>
        <input v-model="keyword" class="input" type="text" placeholder="请输入关键字" />
      </div>
      <div class="btn" @click="sendSearch">搜索</div>
    </div>
    <div class="suggestions" v-if="postList.length==0">
      <div class="history">
        <h2 class="title">历史记录</h2>
        <div class="list">
          <div
            class="item"
            @click="sendHistorySearch(item)"
            v-for="(item,index) in history"
            :key="index"
          >{{item}}</div>
          <!-- <div class="item">双语阅读</div>
          <div class="item">最新科技</div>-->
        </div>
      </div>
      <div class="hot">
        <h2 class="title">热门搜素</h2>
        <div class="list">
          <div
            class="item"
            v-for="(item,index) in hotList"
            :key="index"
            @click="sendHotSearch(item)"
          >{{item}}</div>
          <!-- <div class="item">双语阅读</div>
          <div class="item">最新科技</div>
          <div class="item">lol</div>
          <div class="item">王者荣耀</div>
          <div class="item">cf</div>-->
        </div>
      </div>
    </div>
    <div class="postList" v-else>
      <PostItem :postData="item" v-for="(item,index) in postList" :key="index" />
    </div>
  </div>
</template>

<script>
import PostItem from "@/components/PostItem";
export default {
  data() {
    return {
      keyword: "",
      postList: [],
      hotList: ["美女", "关晓彤", "双语阅读"],
      history: []
    };
  },
  components: {
    PostItem
  },
  methods: {
    sendSearch() {
      this.$axios({
        url: "/post_search",
        method: "GET",
        params: {
          keyword: this.keyword
        }
      }).then(res => {
        console.log(res.data);
        this.postList = res.data.data;
        this.setHistory();
      });
    },
    setHistory() {
      if (this.history.indexOf(this.keyword) < 0) {
        // this.history.push(this.keyword);
        //在数组前面插入进去
        this.history.unshift(this.keyword);
      }
      if (this.history.length > 3) {
        // this.history.shift();
        //从后面最后一个开始删除
        this.history.pop();
      }
      console.log(this.history);
    },
    sendHistorySearch(historyKeyword) {
      this.keyword = historyKeyword;
      this.sendSearch();
    },
    sendHotSearch(hotKeyword) {
      this.keyword = hotKeyword;
      this.sendSearch();
    },
    goBack() {
      if (this.postList.length > 0) {
        this.keyword = "";
        this.postList = [];
      } else {
        this.$router.back();
      }
    }
  },
  watch: {
    keyword(newVal) {
      if (!newVal) {
        this.postList = [];
      }
    },
    //监控历史记录数组变化,放在本地存储中
    history(newHistory) {
      localStorage.setItem("searchHistory", JSON.stringify(newHistory));
    }
  },
  mounted() {
    if (localStorage.getItem("searchHistory")) {
      this.history = JSON.parse(localStorage.getItem("searchHistory"));
    }
  }
};
</script>

<style lang='less' scoped>
.header3 {
  display: flex;
  padding: 2.778vw;
  align-items: center;
  .iconjiantou2 {
    padding: 0 2.778vw;
  }
  .searchWrapper {
    display: flex;
    flex: 1;
    width: 71.667vw;
    height: 10.556vw;
    border: 1px solid #aaa;
    border-radius: 5.278vw;
    align-items: center;
    padding: 0 3.889vw;
    .iconfont {
      padding-right: 2.778vw;
    }
    .input {
      flex: 1;
      border: 0;
      outline: 0;
      font-size: 3.889vw;
      background-color: #f2f2f2;
    }
  }
  .btn {
    padding: 0 2.778vw;
    font-size: 4.444vw;
  }
}
.suggestions {
  padding: 5.556vw;
  .history {
    padding-bottom: 5.556vw;
    border-bottom: 1px solid #141414;
  }
  .title {
    font-size: 5vw;
    padding: 5.556vw 0;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 50%;
      font-size: 4.444vw;
      padding-bottom: 2.778vw;
      color: #666;
    }
  }
}
</style>